<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSP测试 - API测试工具</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .test-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .test-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #0056b3;
        }
        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 15px;
            border-radius: 5px;
            color: white;
            z-index: 1000;
        }
        .notification-success {
            background: #28a745;
        }
        .notification-error {
            background: #dc3545;
        }
        .notification-info {
            background: #17a2b8;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🧪 CSP修复测试页面 - API测试工具</h1>
        <p>此页面用于测试API测试工具的CSP违规问题是否已修复</p>
        
        <div class="test-section">
            <h3>测试1: Tab切换功能</h3>
            <p>点击下面的按钮测试tab切换功能：</p>
            <nav class="nav-tabs">
                <button class="nav-tab active" data-tab="test1">测试Tab 1</button>
                <button class="nav-tab" data-tab="test2">测试Tab 2</button>
                <button class="nav-tab" data-tab="test3">测试Tab 3</button>
            </nav>
            
            <div id="test1-tab" class="tab-content active">
                <h4>测试Tab 1 内容</h4>
                <p>这是第一个测试标签页的内容。</p>
            </div>
            
            <div id="test2-tab" class="tab-content">
                <h4>测试Tab 2 内容</h4>
                <p>这是第二个测试标签页的内容。</p>
            </div>
            
            <div id="test3-tab" class="tab-content">
                <h4>测试Tab 3 内容</h4>
                <p>这是第三个测试标签页的内容。</p>
            </div>
        </div>
        
        <div class="test-section">
            <h3>测试2: 按钮点击功能</h3>
            <p>点击下面的按钮测试事件监听器：</p>
            <button class="test-button" id="testBtn1">测试按钮 1</button>
            <button class="test-button" id="testBtn2">测试按钮 2</button>
            <button class="test-button" id="testBtn3">测试按钮 3</button>
        </div>
        
        <div class="test-section">
            <h3>测试3: 通知功能</h3>
            <p>点击下面的按钮测试通知功能：</p>
            <button class="test-button" id="showSuccessNotification">成功通知</button>
            <button class="test-button" id="showErrorNotification">错误通知</button>
            <button class="test-button" id="showInfoNotification">信息通知</button>
        </div>
        
        <div class="test-section">
            <h3>测试结果</h3>
            <div id="testResults">
                <div class="test-result success">
                    ✅ 页面加载成功，没有CSP错误
                </div>
            </div>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notificationContainer" class="notification-container"></div>

    <script>
        // 测试用的JavaScript代码
        console.log('🧪 CSP测试页面加载完成');
        
        // 设置事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🔧 设置测试事件监听器...');
            
            // Tab切换测试
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    console.log('🖱️ 点击测试标签页:', tabName);
                    switchTestTab(tabName);
                });
            });
            
            // 按钮点击测试
            document.getElementById('testBtn1').addEventListener('click', function() {
                showTestResult('测试按钮 1 点击成功');
            });
            
            document.getElementById('testBtn2').addEventListener('click', function() {
                showTestResult('测试按钮 2 点击成功');
            });
            
            document.getElementById('testBtn3').addEventListener('click', function() {
                showTestResult('测试按钮 3 点击成功');
            });
            
            // 通知测试
            document.getElementById('showSuccessNotification').addEventListener('click', function() {
                showNotification('这是一个成功通知', 'success');
            });
            
            document.getElementById('showErrorNotification').addEventListener('click', function() {
                showNotification('这是一个错误通知', 'error');
            });
            
            document.getElementById('showInfoNotification').addEventListener('click', function() {
                showNotification('这是一个信息通知', 'info');
            });
            
            console.log('✅ 测试事件监听器设置完成');
        });
        
        // 测试Tab切换函数
        function switchTestTab(tabName) {
            console.log('🔄 切换测试标签页到:', tabName);
            
            try {
                // 隐藏所有标签页
                document.querySelectorAll('.tab-content').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.nav-tab').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 显示目标标签页
                const targetTab = document.getElementById(`${tabName}-tab`);
                if (targetTab) {
                    targetTab.classList.add('active');
                    console.log('✅ 测试标签页已激活');
                }
                
                // 激活目标按钮
                const targetBtn = document.querySelector(`[data-tab="${tabName}"]`);
                if (targetBtn) {
                    targetBtn.classList.add('active');
                    console.log('✅ 测试按钮已激活');
                }
                
                showTestResult(`成功切换到标签页: ${tabName}`);
                
            } catch (error) {
                console.error('❌ 切换测试标签页失败:', error);
                showTestResult(`切换标签页失败: ${error.message}`, 'error');
            }
        }
        
        // 显示测试结果
        function showTestResult(message, type = 'success') {
            const resultsDiv = document.getElementById('testResults');
            const resultDiv = document.createElement('div');
            resultDiv.className = `test-result ${type}`;
            resultDiv.textContent = message;
            resultsDiv.appendChild(resultDiv);
        }
        
        // 显示通知
        function showNotification(message, type = 'info') {
            const container = document.getElementById('notificationContainer');
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.innerHTML = `
                <span>${message}</span>
                <button class="notification-close" style="background: none; border: none; color: white; margin-left: 10px; cursor: pointer;">×</button>
            `;
            
            // 添加关闭按钮事件监听器
            const closeBtn = notification.querySelector('.notification-close');
            closeBtn.addEventListener('click', function() {
                notification.remove();
            });
            
            container.appendChild(notification);
            
            // 3秒后自动移除
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.remove();
                }
            }, 3000);
        }
    </script>
</body>
</html>



